<template>
    <div class="pieContainer" ref="container"></div>
</template>
<script setup lang="ts">
import * as echarts from "echarts"

import { ref, watchEffect, reactive } from "vue"

import * as api from "../../api"


//引入基本选项
import taskPieOption from "../../echarts/taskPieOption"

// console.log(api)

let container = ref<HTMLInputElement | null>(null)

//泛型

type Itask = {
    value: string
    name: string
}

//声明一个饼图的数据

let taskData = reactive<Array<Itask> | any>([])

//发起异步请求,一般是副作用函数

watchEffect(() => {
    let pieCharts = echarts.init(container.value!)

    //监听窗口大小发生改变

    window.onresize = function () {
        pieCharts.resize
    }

    //打开加载动画
    pieCharts.showLoading()
    //发起请求
    api.getTaskData()
        .then(res => {
            // console.log(res)
            taskData = res.data.data;
            // console.log(taskData)
            //更改option选项中的数据
            let option = taskPieOption;
            option.series[0].data = taskData
            pieCharts.setOption(option)
            //关闭加载动画
            pieCharts.hideLoading()
        })
}, {
    flush: "post"
})

</script>
<style scoped>
.pieContainer {
    height: 300px;
    border: 1px solid #ccc;
}
</style>